<script setup lang="ts" name="Child">
import { inject, ref } from 'vue'

// 子组件接收
const props = defineProps<{
  money: number
  msg: string
  modelValue: number
}>()

// 父组件派发事件
const emit = defineEmits<{
  (e: 'update:money', money: number): void
  (e: 'update:msg', msg: string): void
  (e: 'update:modelValue', age: number): void
  (e: 'on-set', child: string): void
}>()

const child = ref('我是孩子')

const set = () => {
  emit('on-set', child.value)
}

const changeMoney = () => {
  emit('update:money', props.money + 1)
}
const changeMsg = () => {
  emit('update:msg', '呵呵呵')
}
const changeAge = () => {
  emit('update:modelValue', props.modelValue + 1)
}

const res = inject('money')
console.log(res)
</script>

<template>
  <div class="child-page">
    <h3>{{ money }} -- {{ msg }} -- {{ modelValue }}</h3>
    <button @click="changeMoney">修改数据1</button>
    <button @click="changeMsg">修改数据2</button>
    <!-- <button @click="$emit('update:modelValue', 21)">修改数据3</button> -->
    <button @click="changeAge">修改数据3</button>
    <button @click="set">发送数据给父组件</button>
  </div>
</template>

<style lang="scss" scoped></style>
